<template>
  <CellGroup>
    <Cell title="关于" value="v1.0.1" is-link :to="{ path: '/setting/about' }"></Cell>
    <Cell title="账号与安全" :value="userName" is-link></Cell>
  </CellGroup>

  <Button block type="warning" @click="logOff" style="margin-top: 6px">退出</Button>
</template>

<script setup>
  import { useStore } from 'vuex';
  import { useRouter } from 'vue-router';

  import { ref, onMounted } from 'vue';
  import { Dialog, CellGroup, Cell, Button } from 'vant';

  const $store = useStore();
  const $router = useRouter();

  const userName = ref('');

  function logOff() {
    Dialog.confirm({ title: '警告', message: '是否确定退出？' })
      .then(val => {
        localStorage.clear();

        $store.commit('logOff');
        $router.push('/login');
      })
      .catch(val => {});
  }

  onMounted(() => {
    userName.value = $store.state.user.userName;
  });
</script>

<style lang="less" scoped>
  .settings {
    margin-bottom: 10px;
  }
</style>
